import { useAuth } from 'context/auth-context'
import React, { FormEvent } from 'react'

// interface Base {
//   id:number
// }
// interface Advance extends Base {
//   name:string
// }

// const test = (p:Base)=>{}
// // 鸭子类型（duck typing）：面向接口编程，而不是面向对象编程
// const a = {id:1,name:"jack"}
// test(a)
// const apiUrl = process.env.REACT_APP_API_URL

export default function LoginScreen() {

  // const login = (param:{username:string,password:string} )=>{
  //   fetch(`${apiUrl}/login`,{
  //     method:'POST',
  //     headers:{"Content-Type":"application/json"},
  //     body:JSON.stringify(param)
  //   }).then(
  //    async (response:Response) => {
  //     if(response.ok){
        
  //     }
  //    }
  //   )
  // }

  const {login,user} = useAuth()


  // HTMLFormElement extends Element
  const handleSubmit = (event:FormEvent<HTMLFormElement>) =>{
    //阻止表单提交默认行为
    event.preventDefault()
    const username = (event.currentTarget[0] as HTMLInputElement).value
    const password = (event.currentTarget[1] as HTMLInputElement).value
    login({username,password})
  }


  return (
    <div>
      <form onSubmit={handleSubmit}>
        {
          user? <div>登录成功，用户名{user?.name}</div>:null
        }
        <div>
          <label htmlFor='username'>用户名</label>
          <input type="text" id={'username'} />
        </div>
        <div>
          <label htmlFor="password">密码</label>
          <input type="text" id='password' />
        </div>
        <button type='submit'>登录</button>
      </form>
    </div>
  )
}
